.button {
	width: 122px;
	
	float:left;
	margin-bottom: 15px;

	font-size:14px;
	font-weight:bold;

	line-height:31px;
	text-align:center;

	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
.red {
	background: -webkit-linear-gradient(top, #dc4646 0%,#a73636 88%,#8e2d2d 100%);
	background: -moz-linear-gradient(top, #dc4646 0%,#a73636 88%,#8e2d2d 100%);
	background: -o-linear-gradient(top, #dc4646 0%,#a73636 88%,#8e2d2d 100%);
	background: -ms-linear-gradient(top, #dc4646 0%,#a73636 88%,#8e2d2d 100%);
	background: linear-gradient(top, #dc4646 0%,#a73636 88%,#8e2d2d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc4646', endColorstr='#8e2d2d',GradientType=0 );
	border: 1px solid #850000;

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.15);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.15);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.15);

	color: #fff;
	text-shadow:0px -1px 0px rgba(0,0,0,.22);
}
.blue-hover:hover {
	background: -webkit-linear-gradient(top, #4db9fe 0%,#339be3 90%,#2786c9 100%);
	background: -moz-linear-gradient(top, #4db9fe 0%,#339be3 90%,#2786c9 100%);
	background: -o-linear-gradient(top, #4db9fe 0%,#339be3 90%,#2786c9 100%);
	background: -ms-linear-gradient(top, #4db9fe 0%,#339be3 90%,#2786c9 100%);
	background: linear-gradient(top, #4db9fe 0%,#339be3 90%,#2786c9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4db9fe', endColorstr='#2786c9',GradientType=0 );
	border:1px solid #0f5ea9;

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.15);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.15);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.15);

	color: #fff;
	text-shadow:0px -1px 0px rgba(0,0,0,.22);
}

/* ----------------------------------------------------------------------------------------------------
Divider colors, these create the colors for the button diviers, do not change the lines below!
----------------------------------------------------------------------------------------------------*/

.button span {
	width:31px;
	height:31px;
	float: left;

	background-image:url(https://hocmai.googlecode.com/svn/trunk/images/icons/buttons.png);
	background-repeat:no-repeat;
}

.red span,
.red.blue-hover span,
.red.green-hover span,
.red.black-hover span,
.red.purple-hover span {
	-webkit-box-shadow:
		1px 0px 0px #821913,
		2px 0px 0px #d5605d;
	-moz-box-shadow:
		1px 0px 0px #821913,
		2px 0px 0px #d5605d;
	box-shadow:
		1px 0px 0px #821913,
		2px 0px 0px #d5605d;
}
.grey.blue-hover:hover span,
.green.blue-hover:hover span,
.black.blue-hover:hover span,
.red.blue-hover:hover span,
.purple.blue-hover:hover span {
	-webkit-box-shadow:
		1px 0px 0px #2f87c3,
		2px 0px 0px rgba(255,255,255,.35);
	-moz-box-shadow:
		1px 0px 0px #2f87c3,
		2px 0px 0px rgba(255,255,255,.35);
	box-shadow:
		1px 0px 0px #2f87c3,
		2px 0px 0px rgba(255,255,255,.35);
}
/* ----------------------------------------------------------------------------------------------------
Dividers for images floated to the right, add the class image-right to the anchor tag you wish to have images to the right of the button.
----------------------------------------------------------------------------------------------------*/

.image-right span { 
	float:right;
}
.image-right.red.blue-hover:hover span,
.image-right.blue-hover:hover span{
	-webkit-box-shadow:
		-1px 0px 0px #2f87c3,
		-2px 0px 0px rgba(255,255,255,.35);
	-moz-box-shadow:
		-1px 0px 0px #2f87c3,
		-2px 0px 0px rgba(255,255,255,.35);
	box-shadow:
		-1px 0px 0px #2f87c3,
		-2px 0px 0px rgba(255,255,255,.35); 
}
.image-right.red span{
	-webkit-box-shadow:
		-1px 0px 0px #821913,
		-2px 0px 0px #d5605d;
	-moz-box-shadow:
		-1px 0px 0px #821913,
		-2px 0px 0px #d5605d;
	box-shadow:
		-1px 0px 0px #821913,
		-2px 0px 0px #d5605d;
}
/* ----------------------------------------------------------------------------------------------------
Image classes - Add the according class to the span tag for your desired image, thats all!
----------------------------------------------------------------------------------------------------*/

.blue-hover span.mail {
	background-position:0 0;
} 
.blue-hover span.download{
	background-position:-31px 0;
} 
.blue-hover span.cart{
	background-position:-62px 0;
} 
.blue-hover span.plus{
	background-position:-93px 0;
} 
.blue-hover span.prev{
	background-position:-124px 0;
} 

.blue-hover span.next{
	background-position:-155px 0;
} 
.blue-hover span.cross {
	background-position:-186px 0;
}

.blue-hover span.info{
	background-position:-217px 0;
}

.blue-hover span.tick{
	background-position:-248px 0;
}

.blue-hover span.permalink {
	background-position:-279px 0;
}

/** Hover Images **/
.red.blue-hover span.mail { background-position:0 -31px; }
.red.blue-hover span.download  { background-position:-31px -31px; }
.red.blue-hover span.cart   { background-position:-62px -31px; }
.red.blue-hover span.plus   { background-position:-93px -31px; }
.red.blue-hover span.prev  { background-position:-124px -31px; }
.red.blue-hover span.next   { background-position:-155px -31px; }
.red.blue-hover span.cross  { background-position:-186px -31px; }
.red.blue-hover span.info  { background-position:-217px -31px; }
.red.blue-hover span.tick  { background-position:-248px -31px; }
.red.blue-hover span.permalink  { background-position:-279px -31px; }